/* eslint-disable vue/valid-template-root */
<template>
  <el-dialog v-bind="$attrs" width="800px">
    <div class="exploitation-container">
      <super-form
        ref="superForm"
        label-width="100px"
        size="middle"
        :form-data="formData"
        :render-form-item="renderFormItem"
        :form-buttons="formButtons"
      />
    </div>
    <StaffTemplate ref="StaffTemplateRef" :type="[1]" title="选择人员" />

    <template v-if="pictureVisible">
      <el-dialog
        title="预览图"
        :visible="pictureVisible"
        append-to-body
        :before-close="() => (pictureVisible = false)"
      >
        <section class="section-body">
          <info-line
            id="timeLine"
            :x-data="infoLineXData"
            :data="infoLineData"
            :loading="timeLoading"
            :opt-renderer="'canvas'"
            :option="timeLineOption"
          />
        </section>
      </el-dialog>
    </template>
  </el-dialog>
</template>

<script>
import SuperForm from '@/components/SuperForm'
import { updateFormItem } from './config'
import InfoLine from '@/components/Echarts/InfoLine'
import StaffTemplate from '@/containers/StaffTemplate/template'
import {
  // fetchDeptUserTree,
  fetchCheckTopicDropdownList,
  fetchDataSystemDropdownList,
  fetchDictionaryList
} from '../../../api/indicatorlib/department'
import { selectDeptList } from '@/api/common/commonDropDown'
import {
  fetchGetDeptUserTree,
  fetchGetChartPreviewList
} from '../../../api/indicatorlib/configuration'
export default {
  name: 'ExploitationUpdate',
  components: { SuperForm, InfoLine, StaffTemplate },
  props: {
    deviceCodeDisabled: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    handleSubmit: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      pictureVisible: false,
      infoLineData: [],
      infoLineXData: [],
      timeLineOption: {},
      timeLoading: false,
      selectVisible: false, // 人员树显示隐藏
      userList: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      renderFormItem: updateFormItem(
        this.handleDeptOnchange,
        this.handleUserTree,
        this.handleDefaultSelect,
        this.handlekpinNameOnchange
      ),
      departId: '',
      targetName: '',
      formButtons: {
        isDialog: true,
        submitName: '提交',
        resetName: '取消',
        otherBtn: {
          name: '预览',
          // click: () => {
          //   console.log(1111)
          // }
          click: this.handleTargetPerview
        },

        submitCallback: values => this.handleSubmit(values),
        resetCallback: () => this.$emit('update:visible', false)
      }
    }
  },
  created() {
    console.log('ssssss')
    // console.log(updateFormItem(this.handleUserTree))
  },
  mounted() {
    this.postDeptAllList()
    this.postCheckTopicAllList()
    this.postDataSystemAlllist()
    // this.handleSelectPerson()
    this.postGetDeptUserTree()
    this.setLineOption()
    this.postDictionaryList()
  },
  methods: {
    // 预览echarts图
    setLineOption() {
      this.timeLineOption = {
        title: {
          text: 'Awesome Chart'
        },
        xAxis: {
          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
        },
        yAxis: {},
        series: [
          {
            type: 'line',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
    },
    // 考核部门下拉
    postDeptAllList() {
      selectDeptList({ orgId: 0, type: 0 }).then(res => {
        this.$data.renderFormItem[1].slotAttrs.options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    handlekpinNameOnchange(e) {
      console.log(e)
      this.$data.targetName = e
    },
    // 监听部门id
    handleDeptOnchange(e) {
      console.log(e)
      console.log(1111111111111)
      this.$data.departId = e
      console.log(this.$data.departId)
      this.postCheckTopicAllList(e)
    },
    // 考核主题下拉
    postCheckTopicAllList(e) {
      console.log(e)
      fetchCheckTopicDropdownList({ deptId: e }).then(res => {
        this.$data.renderFormItem[2].slotAttrs.options = res.map(e => ({
          key: e.id,
          value: e.topic
        }))
      })
    },
    // 指标服务器下拉下拉
    postDataSystemAlllist() {
      fetchDataSystemDropdownList({}).then(res => {
        this.$data.renderFormItem[3].slotAttrs.options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    // 获取数据系统下拉
    postDictionaryList() {
      fetchDictionaryList({ groupName: '数据系统' }).then(res => {
        this.$data.renderFormItem[4].slotAttrs.options = res.map(e => ({
          key: e.id,
          value: e.name
        }))
      })
    },
    // 部门人员树
    postGetDeptUserTree() {
      fetchGetDeptUserTree({
        deptType: 0,
        userType: 1
      }).then(res => {
        this.$data.userList = res
        console.log(this.$data.userList)
        this.id = res.id
        this.label = name
        this.userList = this.formatting_tree(res)
      })
      // this.userList = tree_array
    },
    // 预览
    handleTargetPerview() {
      fetchGetChartPreviewList({
        deptId: this.$data.departId,
        kpiName: this.$data.targetName
      }).then(res => {
        const infoLineXData = []
        const infoLineData = []
        res.forEach(item => {
          const { kpiDate, kpiValue } = item
          infoLineXData.push(kpiDate)
          infoLineData.push(kpiValue)
        })
        this.infoLineXData = infoLineXData
        this.infoLineData = infoLineData
        this.pictureVisible = true
      })
    },
    handleUserTree() {
      let accountIds = []
      if (this.$props.formData && this.$props.formData.responsibleAccountIds) {
        accountIds = this.$props.formData.responsibleAccountIds
      }
      this.$refs.StaffTemplateRef.open({ orgList: accountIds }).then(res => {
        // this.$refs.superForm.setFormData({
        //   responsibleAccountIds: res.orgList.map(e => e.id),
        //   responsibleAccountNames: res.orgList.map(e => e.name)
        // })
        this.$emit('responsibleAccountChange', res)
      })
    },
    handleDefaultSelect() {
      console.log(33333333333333333333)
    },
    formatting_tree(d, have_line = true, filter_not_five = false) {
      const tree_obj = {} // 子节点按照父节点分类存入 对象中   key 为父节点ID
      d.forEach(item => {
        // eslint-disable-next-line no-irregular-whitespace
        // 遍历git  １、添加label = name　２、取出上级ID
        item.label = item.name
        const arr = tree_obj[item.parentDeptId] || [] // 同父节点数据的 集合 数组
        arr.push(item)
        tree_obj[item.parentDeptId] = arr
      })
      for (let i = 0; i < 6; i++) {
        // 找到顶级
        const key = (have_line ? '_' : '') + i
        if (tree_obj[key]) {
          var tree_arry = tree_obj[key]
          break
        }
      }
      console.log(tree_obj)
      console.log(tree_arry)
      var add_children = function(e) {
        // 根据ID查找添加自己的子节点

        for (let index = e.length - 1; index > -1; index--) {
          const item = e[index]
          if (tree_obj[item.id] && item.id !== item.parentDeptId) {
            item.children = tree_obj[item.id]
            add_children(item.children)
          } else if (item.type !== 5 && filter_not_five) {
            e.splice(index, 1)
          }
        }
      }
      add_children(tree_arry)
      if (filter_not_five) {
        tree_arry = tree_arry.filter(item => {
          return item.children && item.children.length > 0
        })
      }
      return tree_arry
    }
  }
}
</script>

<style lang="scss">
.exploitation-container {
  .el-radio__input {
    display: none;
  }

  .is-checked img {
    border: 1px solid  #566CF5;;
  }
}
</style>
